<script setup lang="ts">
    import { ref, onMounted, reactive, inject } from 'vue'
    import { genFileId, ElMessage, ElLoading } from 'element-plus'
    import { useRouter } from "vue-router";
    import AddProjectOperateBox from '/src/components/AddProjectOperateBox.vue'
    import AddProjectOperateButton from '/src/components/AddProjectOperateButton.vue'
    import SlotsAddProjectOpt from '/src/components/SlotsAddProjectOpt.vue'
    import FilePreview from '@/components/FilePreview.vue'
    import FileUpload from '@/components/FileUpload.vue'
    import { GetRecord,CoverDueWord} from '@/api/common/dueDiligenceOptRecord.js'

    const router = useRouter();
    const loading = ref(false)
    const loadingText = ref('Lodding...')
    // 上传文件加载状态
    const uploadLoading = ref(false)
    const data = reactive({
        dueDiligenceOptRecord: {
            disposalResults: ''
        },
        projectCode:''
    })
    
    const opeateParam = {
        opeateText:'报告生成进度动态更新展示',
    };

    onMounted(() => {
        data.projectCode = router.currentRoute.value.query.projectCode;

        GetRecord(data.projectCode, 4)
            .then((response) => {
                //console.log('/upload/'+response.data.content[0].disposalResults)
                data.dueDiligenceOptRecord.disposalResults = response.data.content[0].disposalResults;
                //console.log(data.dueDiligenceOptRecord.disposalResults)
            })
            .catch((error) => {}); 

    })

    const sendReport = () => {
        loadingText.value = '正在生成尽调报告，请稍等...';
        // 开启loading
        loading.value = true;
        setTimeout(() => {
            // 关闭loading
            loading.value = false;
            ElMessage({
                message: '修订尽调报告成功!',
                type: 'success',
            })
            router.push('/addProject/taskSummary')
        }, 2000);
    }

    const download = () => {
        let a = document.createElement("a");
        a.href = import.meta.env.VITE_VUE_APP_SERVER_URL + data.dueDiligenceOptRecord.disposalResults
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
    const myAutoUpload = (fileList) => {
        // 上传文件时上传按钮加载中
        uploadLoading.value = true
        console.log("fileList", fileList);
        console.log("fileList.value[0].name", fileList.value[0].name);
        // ElMessage.success(fileList.value[0].name + "上传成功！")
        // // 刷新当前页面
        // reload()

        if (fileList.length === 0) {
            return ElMessage.error('请选择要上传的文件');
        }
        const formData = new FormData();
        formData.append('fileKey', data.dueDiligenceOptRecord.disposalResults)
        formData.append('file', fileList.value[0].raw);
        CoverDueWord(formData)
            .then((response) => {
                 ElMessage({
                    message: '文件覆盖成功！',
                    type: 'success',
                })
                // 上传完成关闭加载中状态
                uploadLoading.value = false
                // 刷新当前页面
                reload()
            }).catch((error) => {
                // 上传失败关闭加载中状态
                uploadLoading.value = false
                // 刷新当前页面
                reload()
            });
    }

    /**
     * 调用 App.vue 提供的方法，进行刷新
     */
    const reload = inject("reload")
</script>

<template>
    <SlotsAddProjectOpt
        :loading="loading"
        :loadingText="loadingText"
    >
        <div class="w-100">
            <!-- 文件预览 -->
            <div class="fileView">
                <FilePreview :fileUrl="data.dueDiligenceOptRecord.disposalResults"/>
            </div>
            <div class="d-flex justify-content-end pt-3 pb-3 pe-3">
                <!-- 文件上传 -->
                <FileUpload class="ps-2 pe-2"
                    :autoUpload="true"
                    :methondName="'上传修订后报告'"
                    :showFileList="false"
                    :isTip="false"
                    :acceptedExtensions="['docx']"
                    :loading="uploadLoading"
                    @myAutoUpload="myAutoUpload"
                />
                <!-- 操作区按钮组 -->
                <AddProjectOperateButton 
                    :opdateButtons="[{name:'下载尽调报告', methond:'download'},{name:'发送尽调报告', methond:'sendReport'}]"
                    @download="download"
                    @sendReport="sendReport"
                    class="d-flex justify-content-end"
                />
            </div>
        </div>
    </SlotsAddProjectOpt>
</template>

<style scoped>
.fileView {
    height: 450px;
    overflow: scroll;
}
</style>
